JS 平滑滚动，指定时间

这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

• 前端业务中需要快速处理数据、DOM、浏览器能力或通用工具函数时参考。
• 把散落在项目里的小技巧抽成可复用代码片段，减少重复实现。
• 排查兼容性和边界输入问题前，先用本文示例确认核心思路。

核心要点 ​

• 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。

// window.requestAnimationFrame 主要看当前滚动条是页面还是DOM scrollToTop() { const scrollListener = document.querySelector('.page') const scrollTop = scrollListener.scrollTop

  if (scrollListener && scrollTop > 0) {
    // scrollListener.scrollTo({ top: 0, behavior: 'auto' })
    window.requestAnimationFrame(goToTop)
  }
  function goToTop() {
    const currentPosition = scrollListener.scrollTop
    if (currentPosition > 0) {
      window.requestAnimationFrame(goToTop)
      scrollListener.scrollTo(0, currentPosition - (currentPosition / 20))
    }
  }
}
scrollToTop()

实践检查清单 ​

• 把示例函数放进业务前，先补齐空值、异常输入、异步失败和浏览器兼容性测试。
• 通用工具函数应尽量收敛到项目公共模块，避免多个页面复制出不同版本。
• 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。